<#import "/layout/page.ftl" as layout>
<#import "/layout/content.ftl" as content>

<@layout.page2col>

	<@content.content2col1>
	
		<@content.content2col1section
				title="Sign Up" 
				subTitle="It's Free!">
			
			<#include "script.ftl" />
			
			<form id="signupForm" action="/signup" method="post" novalidate="novalidate">
				<label for="email">Email Address</label>
				<#if emailInvalid??>
					<div class="input error">
				<#else>
					<div class="input">
				</#if>
					<input type="email" id="email" name="email" placeholder="e.g. someone@mail.com" autocomplete="off" value="${email}" />
					<div class="inputicon">${emailInvalid!""}</div>
				</div>
				
				<label for="playerName">Player Name</label>
				<#if usernameInvalid??>
					<div class="input error">
				<#else>
					<div class="input">
				</#if>
					<input type="text" id="playerName" name="playerName" placeholder="e.g. coolkid" autocomplete="off" value="${username}" />
					<div class="inputicon">${usernameInvalid!""}</div>
				</div>
				
				<label for="password">Password</label>
				<#if passwordInvalid??>
					<div class="input error">
				<#else>
					<div class="input">
				</#if>
					<input type="password" id="password" name="password" value="${password}" />
					<div class="inputicon">${passwordInvalid!""}</div>
				</div>
				
				<input type="submit" value="Sign Up" />
				<a href="/signin" style="font-size:1.5em;margin-left:10px;">Already have an account?</a>
			</form>
		</@content.content2col1section>
		
	</@content.content2col1>
	
	<@content.content2col2>
		<@content.content2col2menu>
			<@content.content2col2menuitem url="/home" text="Home" isActive=false />
			<@content.content2col2menuitem url="/about" text="About" isActive=false />
			<@content.content2col2menuitem url="/signup" text="Sign Up" isActive=true />
			<@content.content2col2menuitem url="/blog" text="Blog" isActive=false />
		</@content.content2col2menu>
	</@content.content2col2>
	
</@layout.page2col>